<template>
  <div class="test-export">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>Excel导出功能测试</span>
        </div>
      </template>
      
      <div class="test-buttons">
        <el-button type="primary" @click="testBasicExport" :loading="loading.basic">
          测试基础导出
        </el-button>
        <el-button type="success" @click="testDetailedExport" :loading="loading.detailed">
          测试详细导出
        </el-button>
        <el-button type="info" @click="testWithFilters" :loading="loading.filtered">
          测试筛选导出
        </el-button>
      </div>
      
      <div class="test-info" v-if="testResult">
        <el-alert
          :title="testResult.title"
          :type="testResult.type"
          :description="testResult.description"
          show-icon
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { exportStudentsToExcel, exportStudentsDetailedToExcel } from '@/api/student'
import { downloadExcelFile } from '@/utils/excel'

const loading = reactive({
  basic: false,
  detailed: false,
  filtered: false
})

const testResult = ref<{
  title: string
  type: 'success' | 'error' | 'warning' | 'info'
  description: string
} | null>(null)

const showResult = (title: string, type: 'success' | 'error' | 'warning' | 'info', description: string) => {
  testResult.value = { title, type, description }
  setTimeout(() => {
    testResult.value = null
  }, 5000)
}

const testBasicExport = async () => {
  loading.basic = true
  try {
    const blob = await exportStudentsToExcel({})
    const timestamp = new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-')
    const filename = `测试_基础导出_${timestamp}.xlsx`
    
    // 验证blob是否有效
    if (!blob || blob.size === 0) {
      throw new Error('导出文件为空')
    }
    
    downloadExcelFile(blob, filename)
    showResult('基础导出成功', 'success', `文件大小: ${(blob.size / 1024).toFixed(2)} KB`)
  } catch (error) {
    console.error('基础导出失败:', error)
    showResult('基础导出失败', 'error', (error as Error).message)
  } finally {
    loading.basic = false
  }
}

const testDetailedExport = async () => {
  loading.detailed = true
  try {
    const blob = await exportStudentsDetailedToExcel({})
    const timestamp = new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-')
    const filename = `测试_详细导出_${timestamp}.xlsx`
    
    // 验证blob是否有效
    if (!blob || blob.size === 0) {
      throw new Error('导出文件为空')
    }
    
    downloadExcelFile(blob, filename)
    showResult('详细导出成功', 'success', `文件大小: ${(blob.size / 1024).toFixed(2)} KB`)
  } catch (error) {
    console.error('详细导出失败:', error)
    showResult('详细导出失败', 'error', (error as Error).message)
  } finally {
    loading.detailed = false
  }
}

const testWithFilters = async () => {
  loading.filtered = true
  try {
    const filters = {
      major: '计算机科学与技术',
      status: 'active'
    }
    const blob = await exportStudentsToExcel(filters)
    const timestamp = new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-')
    const filename = `测试_筛选导出_${timestamp}.xlsx`
    
    // 验证blob是否有效
    if (!blob || blob.size === 0) {
      throw new Error('导出文件为空')
    }
    
    downloadExcelFile(blob, filename)
    showResult('筛选导出成功', 'success', `筛选条件: 专业=计算机科学与技术, 状态=在读, 文件大小: ${(blob.size / 1024).toFixed(2)} KB`)
  } catch (error) {
    console.error('筛选导出失败:', error)
    showResult('筛选导出失败', 'error', (error as Error).message)
  } finally {
    loading.filtered = false
  }
}
</script>

<style scoped>
.test-export {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.test-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.test-info {
  margin-top: 20px;
}
</style>
